import FriendInfo from "./FriendInfo.tsx";
import { Input, message, Button } from "antd";
import { FC, PropsWithChildren, useEffect, useState } from "react";
import { serchUser } from "@/api/xhr/friends/index.ts";
const AddFriend: FC<
  PropsWithChildren<{
    AddFriends: (item: any) => void;
  }>
> = props => {
  const [SerchKeyword, setSerchKeyword] = useState<string>("");
  const [FriendsList, setFriendList] = useState<
    {
      id: number;
      name: string;
      avatar: string;
      isConfirm: boolean;
    }[]
  >();

  const SearchFriends = async () => {
    if (SerchKeyword.trim() == "") {
      message.error("请输入再查询");
    }
    const userlistres = await serchUser({
      keyword: SerchKeyword
    });
    const newFriendList = userlistres.data.map(item => {
      return {
        id: item.id,
        name: item.userName,
        avatar: item.userAvatar,
        isConfirm: item.isConfirm
      };
    });
    setFriendList(newFriendList);
  };
  useEffect(() => {
    if (SerchKeyword.trim() == "") {
      setFriendList([]);
    }
  }, [SerchKeyword]);

  return (
    <div className="w-full flex-1 flex flex-col">
      <div className="flex justify-center items-center mt-3 pb-3 border-b-[1px] border-dashed">
        <Input
          className="focus:border-transparent w-56 border-transparent hover:border-transparent shadow-[0px_0px_0px_2px_#0591ff19] "
          placeholder="输入昵称或者账号"
          value={SerchKeyword}
          onChange={e => {
            setSerchKeyword(e.target.value);
          }}
        />
        <div
          onClick={SearchFriends}
          className=" ml-3 text-sky-300 cursor-pointer "
        >
          搜索
        </div>
      </div>
      <div className="max-h-[295px] flex-1 overflow-y-scroll scrollbar-hide scrollbar select-none cursor-auto flex flex-wrap pt-1">
        {FriendsList?.length ? (
          FriendsList.map(item => {
            return (
              <FriendInfo
                key={item.id}
                avatarImg={item.avatar}
                userName={item.name}
              >
                <div className="text-[12px] flex items-center">
                  <span className="mr-[2px] text-sky-300">发消息</span>
                  <Button
                    type="text"
                    className="text-pink-300 p-0 text-[12px] h-[20px]"
                    onClick={() => props.AddFriends(item)}
                    disabled={item.isConfirm}
                  >
                    +好友
                  </Button>
                </div>
              </FriendInfo>
            );
          })
        ) : (
          <div className="text-center h-full w-full text-xs text-slate-500">
            暂无数据
          </div>
        )}
      </div>
    </div>
  );
};

export default AddFriend;
